﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>结果可视化</title>

    <!-- begin::dataTable -->
{#    <link rel="stylesheet" href="static/assets/vendors/dataTable/responsive.bootstrap.min.css" type="text/css">#}
    <!-- end::dataTable -->


 <link rel="stylesheet" href="static/assets/plugsin/css/font-awesome-4.7.0/css/font-awesome.css">
    <!-- begin::global styles -->
    <link rel="stylesheet" href="static/assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="static/assets/css/app.css" type="text/css">
    <link rel="stylesheet" href="static/assets/css/custom.css" type="text/css">
    <!-- end::custom styles -->
    <style>
        .container {
               display: flex;
              flex-wrap: nowrap;
              flex-direction: row;
            justify-content: space-around;
        }

        .box {
              flex: 0 auto;
              width: 600px;
              height: 400px;
        }

        #chart-container1 {
            width: 400px; /* 设置宽度 */
            height:400px; /* 设置高度 */
            border: 0px solid #ccc; /* 可选：设置边框样式 */
            padding: 0px;
            margin : 0px;
            /* margin: 0 auto; /* 可选：水平居中 */
            overflow: hidden; /* 移除垂直和水平滚动条 */
        }
        #chart-container2 {
            width: 600px; /* 设置宽度 */
            height: 400px; /* 设置高度 */
            border: 0px solid #ccc; /* 可选：设置边框样式 */
            padding: 0px;
            margin : 0px;
            /* margin: 0 auto; /* 可选：水平居中 */
            overflow: hidden; /* 移除垂直和水平滚动条 */
        }
        #chart-container3 {
            width: 400px; /* 设置宽度 */
            height:400px; /* 设置高度 */
            border: 0px solid #ccc; /* 可选：设置边框样式 */
            padding: 0px;
            margin : 0px;
            /* margin: 0 auto; /* 可选：水平居中 */
            overflow: hidden; /* 移除垂直和水平滚动条 */
        }
        #water{
            width: 650px;
            height:450px;
            border: 0px solid #ccc;
            padding: 0px;
            margin : 0px;
            overflow: hidden;
        }
        #waterball-container {
        display: flex;
        justify-content: center;
        }
        .water-box {
              flex: 0 auto;
              width: 1250px;
              height: 125px;
        }
        table{
    width: 100%;
    border-collapse: collapse;
}

table caption{
    font-size: 2em;
    font-weight: bold;
    margin: 1em 0;

}

th,td{
    border: 1px solid #999;
    text-align: center;
    padding: 20px 0;
    color: #000000;
}

table thead tr{
    background-color: #008c8c;
    color: #fff;
}

table tbody tr:nth-child(odd){
    background-color: #eee;
}

table tbody tr:hover{
    background-color: #ccc;
}

{#table tbody tr td:first-child{#}
{#    color: #f40;#}
{#}#}

table tfoot tr td{
    text-align: right;
    padding-right: 20px;
}
.table-caption {
  text-align: center;
  color: #777777;
}

    </style>
</head>
<body>

<!-- begin::page loader-->
<div class="page-loader">
    <div class="spinner-border"></div>
    <span>Loading ...</span>
</div>
<!-- end::page loader -->

<!-- end::sidebar -->

<!-- begin::side menu -->
<div class="side-menu">
    <div class='side-menu-body'>
        <ul>
            <li class="side-menu-divider">Navigation</li>
            <li style="margin-bottom: 20px">
                <a href="/upload_train" onclick="clearCacheAndRedirect(event)"><i class="icon ti-files"></i>
                     <span style="font-size: large">训练</span> </a>


            </li>
            <li style="margin-bottom: 20px"><a href="/upload_test" onclick="clearCacheAndRedirect(event)"><i class="icon ti-file"></i> <span style="font-size: large">测试</span> </a></li>
            <li style="margin-bottom: 20px">
                <a href="/show_result">
                    <i class="icon ti-layout"></i>
                    <span style="font-size: large">结果可视化</span>
                </a>
            </li>
            <li style="margin-bottom: 20px"><a href="/pro_info"><i class="icon ti-comment-alt"></i> <span style="font-size: large">产品说明</span> </a>

            </li>
            <li style="margin-bottom: 20px">
                <a href="/">
                    <i class="icon ti-world"></i>
                    <span style="font-size: large">返回主页</span>
                </a>
            </li>

        </ul>
    </div>
</div>
<!-- end::side menu -->

<!-- begin::navbar -->
<nav class="navbar">
    <div class="container-fluid">

        <div class="header-logo">
            <a href="#">
                <img src="static/assets/media/image/team_logo.png" alt="...">
                <span class="logo-text d-none d-lg-block" style="font-family: Aa阳关曲;font-size: x-large">Eyenergy</span>
            </a>
        </div>

        <div class="header-body">
            <ul class="navbar-nav">
                <li class="nav-item dropdown d-none d-lg-block">
                    <a href="#" class="nav-link" data-toggle="dropdown">
                        <i class="fa fa-th-large"></i>
                    </a>
                </li>
            </ul>

            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="d-lg-none d-sm-block nav-link search-panel-open">
                        <i class="fa fa-search"></i>
                    </a>
                </li>


            </ul>
        </div>

    </div>
</nav>
<!-- end::navbar -->

<!-- begin::main content -->
<main class="main-content">

    <div class="container-fluid">

        <!-- begin::page header -->
        <div class="page-header d-md-flex justify-content-between align-items-center">
            <h4>整体结果可视化</h4>

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb m-t-0">
                    <li class="breadcrumb-item">直方图</li>
                    <li class="breadcrumb-item">面积分割图</li>
                    <li class="breadcrumb-item">扇形-玫瑰图</li>
                </ol>
            </nav>
        </div>
        <!-- end::page header -->
        <div class="card">
            <div class="card-body">
                <div class="card-header">
							<h5 class="card-title">
								<strong>可视化</strong>
                                <i style="font-size: small;color: grey;">(本页面所有动态图像与表格数据均与 <code class="highlighter-rouge">最新测试结果</code> 保持一致 请将光标置于图像之上查看动效)</i>
							</h5>
                            </div>
     <div class="container">
         <div id="chart-container1" class="box"></div>
         <div id="chart-container3" class="box"></div>
     </div>
                <div class="container">
                    <div id="chart-container2" class="box"></div>
                </div>
                </div>
            </div>
{#                <div class="table-responsive">#}
{#                    <img src="assets/media/image/img_6.png" style="width:450px">#}
{#                    <img src="assets/media/image/img_8.png" style="width:450px">#}
{#                    <img src="assets/media/image/img_7.png" style="width:400px">#}
{#                </div>#}

{#        <button onclick="displayData()">查询所有正常的样本</button>#}
{#                            <div class="card">#}
{#                                <div class="card-body">#}
{#                                    <table id="example1" class="table table-striped table-bordered">#}
{#                                        <tbody id="table-body"></tbody>#}
{#                                    </table>#}
{#                                </div>#}
{##}
{#                            </div>#}
        <div class="page-header d-md-flex justify-content-between align-items-center">
            <h4>局部结果可视化</h4>

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb m-t-0">
                    <li class="breadcrumb-item">水球图</li>
                    <li class="breadcrumb-item">故障类型对应的样本号</li>
                </ol>
            </nav>
        </div>
 <div class="container0">
            <div class="contain">
                <div class="card text-white bg-success">
                        <details class="card-header">
                        <summary onclick="displayData('table-body0', 0)">正常</summary>
                            <div id="waterball-container">
                                <div class="water-box" id="water"><iframe src="static/html_tmp_1/liquid0.html" frameborder="0" style="width:100%; height:100%;"></iframe></div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <h3 class="table-caption">分类为正常的样本</h3>
                                    <table id="example1" class="table table-striped table-bordered">
                                        <tbody id="table-body0"></tbody>
                                    </table>
                                </div>
                            </div>
                </details>

{#                    <div class="card-header">正常</div>#}
{#                    <div class="card-body">#}
{#                        <h5 class="card-title">true</h5>#}
{#                    </div>#}
                </div>
            </div>
            <div class="contain">
                <div class="card text-white bg-primary">
                    <details class="card-header">
                        <summary onclick="displayData('table-body1', 1)">故障一</summary>
                        <div id="waterball-container">
                            <div class="water-box" id="water"><iframe src="static/html_tmp_1/liquid1.html" frameborder="0" style="width:100%; height:100%;"></iframe></div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                    <h3 class="table-caption">分类为故障一的样本</h3>
                                    <table id="example2" class="table table-striped table-bordered">
                                        <tbody id="table-body1"></tbody>
                                    </table>
                            </div>
                        </div>
                </details>
                </div>
            </div>
            <div class="contain">
                <div class="card text-white bg-secondary">
                    <details class="card-header">
                        <summary onclick="displayData('table-body2', 2)">故障二</summary>
                        <div id="waterball-container">
                            <div class="water-box" id="water"><iframe src="static/html_tmp_1/liquid2.html" frameborder="0" style="width:100%; height:100%;"></iframe></div>
                        </div>
                        <div class="card">
                                <div class="card-body">
                                    <h3 class="table-caption">分类为故障二的样本</h3>
                                    <table id="example3" class="table table-striped table-bordered">
                                        <tbody id="table-body2"></tbody>
                                    </table>
                                </div>
                            </div>
                        </details>

                </div>
            </div>
            <div class="contain">
                <div class="card text-white bg-info">
                    <details class="card-header">
                        <summary onclick="displayData('table-body3', 3)">故障三</summary>
                        <div id="waterball-container">
                            <div class="water-box" id="water"><iframe src="static/html_tmp_1/liquid3.html" frameborder="0" style="width:100%; height:100%;"></iframe></div>
                        </div>
                        <div class="card">
                                <div class="card-body">
                                    <h3 class="table-caption">分类为故障三的样本</h3>
                                    <table id="example4" class="table table-striped table-bordered">
                                        <tbody id="table-body3"></tbody>
                                    </table>
                                </div>
                            </div>
                </details>
                </div>
            </div>
            <div class="contain">
                <div class="card text-white bg-warning">
                    <details class="card-header">
                        <summary onclick="displayData('table-body4', 4)">故障四</summary>
                        <div id="waterball-container">
                            <div class="water-box" id="water"><iframe src="static/html_tmp_1/liquid4.html" frameborder="0" style="width:100%; height:100%;"></iframe></div>
                        </div>
                        <div class="card">
                                <div class="card-body">
                                    <h3 class="table-caption">分类为故障四的样本</h3>
                                    <table id="example5" class="table table-striped table-bordered">
                                        <tbody id="table-body4"></tbody>
                                    </table>
                                </div>
                            </div>
                </details>

                </div>
            </div>
            <div class="contain">
                <div class="card text-white bg-danger">
                    <details class="card-header">
                        <summary onclick="displayData('table-body5', 5)">故障五</summary>
                        <div id="waterball-container">
                            <div class="water-box" id="water"><iframe src="static/html_tmp_1/liquid5.html" frameborder="0" style="width:100%; height:100%;"></iframe></div>
                        </div>
                        <div class="card">
                                <div class="card-body">
                                    <h3 class="table-caption">分类为故障五的样本</h3>
                                    <table id="example6" class="table table-striped table-bordered">
                                        <tbody id="table-body5"></tbody>
                                    </table>
                                </div>
                            </div>
                </details>

                </div>
            </div>
        </div>
</div>

</main>
<!-- end::main content -->
  <script>
      function displayData(tableId, index) {
    var tableBody = document.getElementById(tableId);

    // 创建一个新的XMLHttpRequest对象
    var xhr = new XMLHttpRequest();

    // 监听请求完成事件
    xhr.onload = function() {
        if (xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            var resultsLabel = response.results_label;
            if (resultsLabel.length === 0) {
                // 如果列表为空，则显示提示消息
                tableBody.innerHTML = '<tr><td colspan="20">在本次测试没有分类到该故障的样本</td></tr>';
            }
            else {
                var rowHtml = '';
                // 添加标题单元格
                for (var i = 0; i < resultsLabel.length; i++) {
                    rowHtml += '<td>' + resultsLabel[i] + '</td>';

                    // 每 10 个数据一行，添加换行符
                    if ((i + 1) % 20 === 0) {
                        rowHtml += '</tr><tr>';
                    }
                }

                // 添加最后一行的数据
                rowHtml += '</tr>';
                tableBody.innerHTML = rowHtml;
            }
        }
    };

    // 发送GET请求到后端接口
    xhr.open("GET", "/results_label?index=" + index, true);
    xhr.send();
}

  </script>
<!-- begin::global scripts -->
<script src="static/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- begin::custom scripts -->
{#<script src="static/assets/js/custom.js"></script>#}
<script src="static/assets/js/app.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
    <script>
        // 在该处引入生成的 HTML 文件
        var chartContainer = document.getElementById('chart-container1');
        chartContainer.innerHTML = '<iframe src="static/html_tmp_1/bar.html" width="100%" height="500px" frameborder="0"></iframe>';
        var chartContainer = document.getElementById('chart-container2');
        chartContainer.innerHTML = '<iframe src="static/html_tmp_1/pie2.html" width="100%" height="500px" frameborder="0"></iframe>';
        var chartContainer = document.getElementById('chart-container3');
        chartContainer.innerHTML = '<iframe src="static/html_tmp_1/treemap.html" width="100%" height="500px" frameborder="0"></iframe>';
    </script>
<!-- end::custom scripts -->
<script>

  function clearCacheAndRedirect(event) {
    // 清空缓冲区代码
    localStorage.removeItem('fileResult');
    localStorage.removeItem('lossData');
    // 执行其他操作，例如页面重定向
    window.location.href = event.target.href;

    // 取消默认行为
    {#event.preventDefault();#}
  }
</script>
</body>
</html>